<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
var echarts = require("echarts");
// require('echarts/theme/macarons') // echarts theme
import resize from "./mixins/resize";
import { selectOrdersByTime } from "@/api/user";
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "350px",
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
    timeData: {
      type: Array,
      default: true,
    },
  },
  data() {
    return {
      chart: null,
      order: {
        order_price: [],
        order_num: [],
      },
    };
  },
  watch: {
    order: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      },
    },
    timeData: {
      deep: true,
      handler() {
        

        console.log(this.timeData);
        this.getweekorder(this.timeData[1], this.timeData[0]);
        this.setOptions(this.order);
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.order);
    },
    setOptions({ order_price, order_num } = {}) {
      this.chart.setOption({
        tooltip: {
          trigger: "axis",
           textStyle : {
            color: '#fff',
          
        },
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["订单数量", "订单金额"],
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
        },
        yAxis: [
          {
            type: "value",
            name: "订单数量",

            position: "left",
            boundaryGap: true,
          },
          {
            type: "value",
            name: "订单金额",

            position: "right",
            boundaryGap: true,
          },
        ],
        series: [
          {
            name: "订单数量",
            data: order_num,
            type: "line",
            smooth: true,
            yAxisIndex: 0,
            areaStyle: {},
            animationDuration: 5000,
            animationEasing: "cubicInOut",
          },
          {
            name: "订单金额",
            data: order_price,
            type: "line",
            smooth: true,
            yAxisIndex: 1,
            areaStyle: {},
            
            animationDuration: 5000,
            animationEasing: "quadraticOut",
          },
        ],
      });
    },

    getLastWeek(value = null, separate = "-") {
      // 如果为null,则格式化当前时间
      if (!value) value = Number(new Date());
      // 如果dateTime长度为10或者13，则为秒和毫秒的时间戳，如果超过13位，则为其他的时间格式
      if (value.toString().length == 10) value *= 1000;
      value = +new Date(Number(value));

      const one_day = 86400000; // 24 * 60 * 60 * 1000;
      const lastWeekDate = new Date(value - 7 * one_day);
      const day = lastWeekDate.getDay() === 0 ? 7 : lastWeekDate.getDay(); // 返回1-7,7表示周日
      // 设置时间为上周那天的0点
      lastWeekDate.setHours(0, 0, 0, 0);

      //算出上周开始时间结束时间
      const week_start_time = new Date(
        lastWeekDate.getTime() - (day - 1) * one_day
      );
      const week_end_time = new Date(
        lastWeekDate.getTime() + (7 - day) * one_day
      );

      //格式化日期
      const filters = (n) => {
        return n < 10 ? (n = "0" + n) : n;
      };
      const startmonth = filters(week_start_time.getMonth() + 1);
      const startDay = filters(week_start_time.getDate());
      const endmonth = filters(week_end_time.getMonth() + 1);
      const endDay = filters(week_end_time.getDate());

      const startDateTime =
        week_start_time.getFullYear() +
        separate +
        startmonth +
        separate +
        startDay;
      const endDateTime =
        week_end_time.getFullYear() + separate + endmonth + separate + endDay;

      return {
        startDateTime: startDateTime + " 00:00:00",
        endDateTime: endDateTime + " 23:59:59",
      };
    },
    getCurrentWeek(value = null, separate = "-") {
      // 如果为null,则格式化当前时间
      if (!value) value = Number(new Date());
      // 如果dateTime长度为10或者13，则为秒和毫秒的时间戳，如果超过13位，则为其他的时间格式
      if (value.toString().length == 10) value *= 1000;
      value = +new Date(Number(value));

      const one_day = 86400000; // 24 * 60 * 60 * 1000;
      const weekDate = new Date(value);
      const day = weekDate.getDay() === 0 ? 7 : weekDate.getDay(); // 返回1-7,7表示周日
      // 设置时间为当天的0点
      weekDate.setHours(0, 0, 0, 0);

      //算出本周开始时间结束时间
      const week_start_time = new Date(
        weekDate.getTime() - (day - 1) * one_day
      );

      //格式化日期
      const filters = (n) => {
        return n < 10 ? (n = "0" + n) : n;
      };
      const startmonth = filters(week_start_time.getMonth() + 1);
      const startDay = filters(week_start_time.getDate());

      const startDateTime =
        week_start_time.getFullYear() +
        separate +
        startmonth +
        separate +
        startDay;
      // const endDateTime = start.getFullYear() + separate + endmonth + separate + endDay;
      //格式化当前时间
      var date = new Date(); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D = date.getDate() + " ";
      let h = date.getHours() + ":";
      let m = date.getMinutes() + ":";
      let s = date.getSeconds();
      let endtime = Y + M + D + h + m + s;

      return {
        startDateTime: startDateTime + " 00:00:00",
        endDateTime: endtime,
      };
    },

    getweekorder(thisWeekEnd, thisWeekStart) {
      //获取近期数据
      // this.lineChartData = lineChartData[type]
      console.log(thisWeekEnd, thisWeekStart);

      selectOrdersByTime({
        endTime: thisWeekEnd,
        startTime: thisWeekStart,
      }).then((res) => {
        this.order.order_price = [];
        this.order.order_num = [];
        for (let item of res.data.data) {
          this.order.order_price.push([item.day, item.orderAllPrice]);
          this.order.order_num.push([item.day, item.orderCount]);
        }
        console.log(this.order);
      });
    },
  },
  created() {
    console.log("上周起始截至时间");
    let lastWeekDate = this.getLastWeek(null, "-");
    console.log(lastWeekDate);

    console.log("本周起始现在时间");
    let lastWeekDate1 = this.getCurrentWeek(null, "-");
    console.log(lastWeekDate1);

    this.getweekorder(lastWeekDate.endDateTime, lastWeekDate.startDateTime);
  },
};
</script>
